<template>
	<view class="u-page">    
	<Navbar title="旅行社区" bgColor="#fff" :h5Show="true"></Navbar>
		<view style="padding: 10px;" class="u-demo-block" v-if="list && list.length > 0">
			<view class="u-demo-block__content" v-for="(item, index) in list" :key="index">
				<view class="album">
					<view class="album__avatar">
						<image
						    :src="item.data.avatar ? item.data.avatar : '/static/img/avatar.png'"
						    mode=""
						    style="width: 32px;height: 32px;"
						></image>
					</view>
					<view class="album__content">
						<u--text
						    :text="item.data.nickName"
						    type="primary"
						    bold
						    size="17"
						></u--text>
						<u-swipe-action>
							<u-swipe-action-item :name="item.data.communityId" :options="item.options" @click="clickData">
								<view class="swipe-action u-border-top u-border-bottom" style="border-top-style: hidden;border-bottom-style: hidden;">
									<view class="swipe-action__content">
										<u-parse margin="0 0 8px 0" :content="item.data.content"></u-parse>
										<u-album v-if="item.data.picPath != null && item.data.picPath != ''" :urls="strToList(item.data.picPath)"></u-album>
										<u--text
											margin="10px 0 8px 0"
										    :text="item.data.releaseTime"
											algin="right"
										    size="12"
										></u--text>
									</view>
								</view>
							</u-swipe-action-item>
						</u-swipe-action>
					</view>
				</view>
			</view>
		</view>
		<u-empty v-else></u-empty>
		<FloatButton type="primary" icon="plus" @click="navigateTo('/pages/business/infoCommunity/edit')"></FloatButton>
	</view>
</template>

<script>
	import Navbar from '@/components/navbar/Navbar'
	import FloatButton from '@/components/button/FloatButton'
	
	import * as communityApi from "@/api/business/community"
	import * as dataCountApi from "@/api/business/dataCount"
	
	export default {
		components: {
		  Navbar,FloatButton
		},
		data() {
			return {
				list: [],
				options: [{
					icon: 'chat-fill',
					style: {
						backgroundColor: '#5ac725',
						borderRadius: '100px',
						width: '40px',
						height: '40px',
						margin: '0 6px'
					}
				}, {
					icon: 'heart-fill',
					style: {
						backgroundColor: '#5ac725',
						borderRadius: '100px',
						margin: '0 6px',
						width: '40px',
						height: '40px',
						color: '#ffffff'
					}
				}]
			}
		},
		mounted() {
		    const app = this;
		    uni.$on('update', function(data) {
		        app.loadData()
		    })
		},    
		//为了优化代码，可以加上移除事件，避免重复监听事件
		onUnload() {
		    // 移除监听事件  
		    uni.$off('update');
		},
		onLoad () {
		  this.loadData()
		},
		methods: {
			loadData(){
				communityApi.communityParentList().then(res => {
					this.list = []
					let data = res.data;
					if(data != null && data.length > 0){
						for(let i=0,len=data.length;i<len;i++){
							let pm={
								data: data[i],
								options: [{
									icon: 'chat-fill',
									style: {
										backgroundColor: '#5ac725',
										borderRadius: '100px',
										width: '40px',
										height: '40px',
										margin: '0 6px'
									}
								}, {
									icon: 'heart-fill',
									style: {
										backgroundColor: '#5ac725',
										borderRadius: '100px',
										margin: '0 6px',
										width: '40px',
										height: '40px',
										color: data[i].likeFlag > -1 ? '#e45656': '#ffffff'
									}
								}]
							}
							this.list.push(pm)
						}
					}
				})
			},
			clickData(e){
				if(e.index == 1){
					let options = [];
					let total = 0;
					for(let i=0,len=this.list.length;i<len;i++){
						let d = this.list[i];
						if(d.data.communityId == e.name){
							total = i;
							break;
						}
					}
					if(this.list[total].options[1].style.color == '#ffffff'){
						this.list[total].options[1].style.backgroundColor = '#5ac725'
						this.list[total].options[1].style.color = '#e45656'
						dataCountApi.dataCountAdd({
							keyId: e.name,
							keyType: 1
						}).then(res => {
							console.log(res)
						})
					}else{
						this.list[total].options[1].style.backgroundColor = '#5ac725'
						this.list[total].options[1].style.color = '#ffffff'
						dataCountApi.dataCountDelete({
							keyId: e.name,
							keyType: 1
						}).then(res => {
							console.log(res)
						})
					}					
				}else{
					this.navigateTo('/pages/business/infoCommunity/detail?id=' + e.name)
				}
			},
			navigateTo (path) {
			  uni.navigateTo({ url: path})
			},
			strToList(str){
				return str.split(',')
			}
		}
	}
</script>

<style lang="scss">
	.album {
		@include flex;
		align-items: flex-start;

		&__avatar {
			background-color: $u-bg-color;
			padding: 5px;
			border-radius: 3px;
		}

		&__content {
			margin-left: 10px;
			flex: 1;
		}
	}
	
	.u-page {
		padding: 0;
	}
	
	.u-demo-block__title {
		padding: 10px 0 2px 15px;
	}
	
	.swipe-action {
		&__content {
			padding: 25rpx 0;
	
			&__text {
				font-size: 15px;
				color: $u-main-color;
				padding-left: 30rpx;
			}
		}
	}
</style>